<template>
    <el-row class="header">
        <el-col :span="12" class="header-logo">
            <div class="logo">
                <img class="header-logo-image" src="@/assets/img/logo.png" alt />
            </div>           
            <span class="header-logo-title">i-LMS实验室后台管理系统</span>
        </el-col>
        <el-col :span="12" class="header-right">
            <el-dropdown trigger="click" @command="handleCommand">
                <span>
                    <i class="el-icon-user"></i>
                    {{ userDep }}
                    <i class="el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
                    <el-dropdown-item>我的设置</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
                <span>
                    <i class="el-icon-user"></i>
                    {{ username }}
                </span>     
        </el-col>
    </el-row>
</template>
<script>
export default {
    data() {
        return {
            name: 'admin',
            searchInput: '',
            userDep:'某某实验室1'
        };
    },
    computed: {
        username() {
            let username = localStorage.getItem('ms_userRealName');
            return username ? username : this.name;
        },
        userdepartmentName() {
            return localStorage.getItem('ms_user_dep_name');
        }
    },
    methods: {
        handleCommand(command) {
            if (command == 'loginout') {
                localStorage.removeItem('ms_username');
                this.$router.push('/login');
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.header {
    display: flex;
    width: 100%;
    height: 100%;
    color: #f8f8f8;
    justify-content: space-around;
    align-items: center;
    &-logo {
        display: flex;
        align-items: center;

        &-image {
            width: 60px;
            height: 60px;
            border-radius:50%;
        }
        &-title {
            padding-left: 20px;
            font-size: 18px;
            font-weight: 650;
        }
    }
    .logo{
        background: #f8f8f8;
        width: 60px;
        height: 60px;
        vertical-align: middle;
        border-radius:50%;
    }
    .header-right {
        display: flex;
        justify-content: right;
        align-items: center;
        font-size: 14px;
        > div {
            padding: 0 5px;
        }
        &-search {
            width: 208px;
        }
    }
    .el-dropdown {
        color: inherit;
    }
}
</style>
